<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>轮播图定时器版</title>
    <style>
        .carousel {
            width: 600px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .carousel-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .carousel-text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
        }

        .carousel-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ccc;
            cursor: pointer;
        }

        .dot.active {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <img src="" alt="轮播图" class="carousel-img">
        <div class="carousel-text"></div>
        <div class="carousel-dots"></div>
    </div>

    <script>
        const carouselData = [
            {
                img: "../学习/images/1.webp",
                text: "帅气逼人"
            },
            {
                img: "../学习/images/2.webp",
                text: "帅到掉渣"
            },
            {
                img: "../学习/images/3.webp",
                text: "帅炸天"
            },
            {
                img: "../学习/images/4.webp",
                text: "帅到没朋友"
            }
        ];

        const imgEle = document.querySelector('.carousel-img');
        const textEle = document.querySelector('.carousel-text');
        const dotsEle = document.querySelector('.carousel-dots');

        carouselData.forEach((_, index) => {
            const dot = document.createElement('div');
            dot.className = `dot ${index === 0 ? 'active' : ''}`;
            dotsEle.appendChild(dot);
        });
        const dotEles = document.querySelectorAll('.dot');
        let currentIndex = 0;
        setInterval(() => {
            currentIndex++;
            if (currentIndex >= carouselData.length) {
                currentIndex = 0;
            }
            imgEle.src = carouselData[currentIndex].img;
            textEle.textContent = carouselData[currentIndex].text;
            dotEles.forEach((dot, index) => {
                if (index === currentIndex) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
        }, 1000);
    </script>
</body>

</html>